package com.neptune.imapp.ui.compose.screen.mainPage.page

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.PagerState
import com.neptune.imapp.R
import com.neptune.imapp.ui.compose.screen.frontPage.login.autoCloseKeyboard
import com.neptune.imapp.ui.compose.screen.mainPage.MainViewModel
import kotlinx.coroutines.launch

@OptIn(ExperimentalComposeUiApi::class, ExperimentalPagerApi::class, ExperimentalLayoutApi::class)
@Composable
fun Chat(mainViewModel: MainViewModel, pagerState: PagerState) {
    val keyController = LocalSoftwareKeyboardController.current
    val focusManager = LocalFocusManager.current
    val scope = rememberCoroutineScope()
    Column(
        modifier = Modifier
            .autoCloseKeyboard(keyController, focusManager)
    ) {
        val inputStr = remember {
            mutableStateOf("")
        }
        val lazyController = rememberLazyListState()
        val list = remember {
            mutableStateListOf(
                "1",
                "2",
                "3",
                "4",
                "5445646545646545645646546556456456456465465465465466546546556"
            )
        }
        SmallTopAppBar(title = { Text(text = mainViewModel.username.value) }, navigationIcon = {
            IconButton(onClick = {
                scope.launch {
                    pagerState.scrollToPage(0)
                }
            }) {
                Icon(
                    painter = painterResource(id = R.drawable.baseline_clear_24),
                    contentDescription = null
                )
            }
        }, modifier = Modifier.imePadding())
        LazyColumn(
            content = {
                itemsIndexed(items = list) { index, item ->
                    if (index % 2 == 0) {
                        ChatBox(str = item, fromSelf = true)
                    } else
                        ChatBox(str = item, fromSelf = false)
                }
            }, state = lazyController, modifier = Modifier
                .weight(0.8f)
                .padding(horizontal = 5.dp)
                .imePadding()
                .imeNestedScroll()
        )
        BottomInput(
            inputStr = inputStr,
            list = list,
            lazyController = lazyController
        )
    }
}

@Composable
fun BottomInput(
    inputStr: MutableState<String>,
    list: SnapshotStateList<String>,
    lazyController: LazyListState
) {
    val scope = rememberCoroutineScope()
    OutlinedTextField(
        value = inputStr.value,
        onValueChange = { inputStr.value = it },
        modifier = Modifier
            .imePadding()
            .fillMaxWidth(),
        trailingIcon = {
            Button(onClick = {
                list.add(inputStr.value)
                scope.launch {
                    lazyController.animateScrollToItem(list.size)
                }
            }, shape = RoundedCornerShape(10.dp)) {
                Text(text = "发送")
            }
        }
    )
}

@Composable
fun ChatBox(str: String, fromSelf: Boolean) {
    if (fromSelf) {
        Row(
            modifier = Modifier
                .padding(vertical = 5.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.End,
            verticalAlignment = Alignment.Top
        ) {
            Surface(
                color = MaterialTheme.colorScheme.primaryContainer,
                shape = RoundedCornerShape(7.dp)
            ) {
                Text(
                    text = str,
                    fontSize = 15.sp,
                    modifier = Modifier
                        .heightIn(min = 35.dp)
                        .widthIn(35.dp, 220.dp)
                        .wrapContentHeight(Alignment.CenterVertically)
                        .wrapContentWidth(Alignment.CenterHorizontally)
                        .padding(horizontal = 10.dp, vertical = 5.dp),
                    textAlign = TextAlign.Start
                )
            }
            Image(
                painter = painterResource(id = R.drawable.img_1),
                contentDescription = null,
                modifier = Modifier
                    .width(35.dp)
                    .height(35.dp)
                    .clip(RoundedCornerShape(50)),
                contentScale = ContentScale.Crop
            )
        }
    } else {
        Row(
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = Alignment.Top,
            modifier = Modifier
                .padding(vertical = 5.dp)
                .fillMaxWidth()
                .height(IntrinsicSize.Min),
        ) {
            Image(
                painter = painterResource(id = R.drawable.img_1),
                contentDescription = null,
                modifier = Modifier
                    .width(35.dp)
                    .height(35.dp)
                    .clip(RoundedCornerShape(50)),
                contentScale = ContentScale.Crop
            )
            Surface(
                color = MaterialTheme.colorScheme.primaryContainer,
                shape = RoundedCornerShape(7.dp)
            ) {
                Text(
                    text = str,
                    fontSize = 15.sp,
                    modifier = Modifier
                        .heightIn(min = 35.dp)
                        .widthIn(35.dp, 220.dp)
                        .wrapContentHeight(Alignment.CenterVertically)
                        .wrapContentWidth(Alignment.CenterHorizontally)
                        .padding(horizontal = 10.dp, vertical = 5.dp),
                    textAlign = TextAlign.Justify
                )
            }
        }
    }
}
